<template>
    <div>
        <div class="hen">
            <el-row class="hengfu">
                <el-col :span="12">
                    <el-page-header @back="goBack">
                        <template #content>
                            <el-breadcrumb-item :to="{ path: '/exam/testpaper' }">安排列表</el-breadcrumb-item>
                        </template>
                    </el-page-header>
                </el-col>
            </el-row>
        </div>

        <div class="tab">
            <div class="grid-content">
                <el-row>
                    <el-col :span="3">
                        <div>
                            <el-button color="#626aef" size="large" type="primary" plain @click="ap">安排</el-button>
                        </div>
                    </el-col>
                    <el-col :span="11">
                        <div class="flex">
                            <el-input v-model="obj.key" size="large" @input="inputs" style="width: 45vh;"
                                placeholder="请输入需要查询的试卷名" class="input-with-select">
                                <template #append>
                                    <el-button>查询</el-button>
                                </template>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <div class="flex">
                            <el-checkbox @change="(val) => checkbox(val, item)" v-for="(item, index) in detailsList"
                                :label="item.title" :key="index">
                                {{ item.title }}
                            </el-checkbox>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div class="trr">
                <el-table v-loading="loading" :data="tableData" height="53vh" max-height="53vh" border style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="index" />
                    <el-table-column prop="name" label="试卷名" width="150" />
                    <el-table-column prop="mode" label="类型">
                        <template #default="scope">
                            <el-tag>
                                {{ scope.row.type == 1 ? '普通考试' : '特别考试' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="orgnames" label="组织" show-overflow-tooltip align="center" width="150" />
                    <el-table-column prop="examCount" label="考试人数" width="120" />
                    <el-table-column prop="mode" label="开始时间" width="170">
                        <template #default="scope">
                            <el-tag>
                                {{ scope.row.createTime }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="mode" label="结束时间" width="170">
                        <template #default="scope">
                            <el-tag>
                                {{ scope.row.beginTime }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="author" label="安排人" width="140" />
                    <el-table-column prop="isPublish" label="状态" width="120">
                        <template #default="scope">
                            <el-tag class="ml-2"
                                :type="scope.row.state == 3 ? 'danger' : scope.row.state == 2 ? 'success' : 'warning'">{{
                                    scope.row.state == 3 ? '已结束' : scope.row.state == 2 ? '考试中' : '未开始' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isBan" label="阅卷" width="120">
                        <template #default="scope">
                            <el-tag class="ml-2" :type="scope.row.isCheck == 0 ? 'success' : 'danger'">{{ scope.row.isCheck
                                == 0
                                ? '已阅卷' : '未阅卷' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100" fixed="right">
                        <template #default="scope">
                            <el-button type="primary" plain size="small" color="#626aef" @click="select(scope.row)">
                                详细
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="example-pagination-block" style="margin-top: 1vh;">
                    <el-pagination @current-change="changes" :page-size="obj.limit" :current-page="obj.page"
                        layout="prev, pager, next" :total="obj.index" />
                </div>
            </div>
        </div>

    </div>
</template>

<script lang="ts">
import type { TypeArrangeDto } from '../../../type/arrange'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { GetArranges } from '../../../api/arrange/arrange'
import { ElMessageBox, ElNotification } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';
import { Path } from 'slate';


export default defineComponent({
    setup() {
        const router = useRouter();

        const route = useRoute();

        const data = reactive<TypeArrangeDto>({
            detailsList: [
                {
                    "title": "未开始",
                },
                {
                    "title": "已结束",
                },
                {
                    "title": "考试中",
                }
            ],
            tableData: [],  // 表格数据
            obj: {
                page: 1,        // 第几页 
                limit: 10,       // 多少条数据
                key: '',        // 题库查询条件 
                index: 0,       // 多少条数据 
            },
            disabled: true,
            loading: true   // 加载屏
        })

        const events = {
            goBack() {
                window.history.go(-1)
            },

            // 安排考试跳转
            ap() {
                router.push('/exam/arrange/add')
            },

            // 考试详情跳转
            select(val:any){
                router.push({path:`/exam/arrange/review/${val.id}`})
            },


            // 选择按钮
            handleSelectionChange() { },

            checkbox(val: any, item: any) {
                // console.log(val, item)
            },

            // 输入框查询
            inputs() {
                data.loading = true
                events.bind()
            },

            // page 改变时触发
            changes(val: any) {
                data.loading = true
                data.obj.page = val
                events.bind()
            },


            //查询题目
            bind() {
                GetArranges({
                    page: data.obj.page,
                    limit: data.obj.limit,
                    key: data.obj.key
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.loading = false
                        data.tableData = res.data.data
                        data.obj.index = res.data.total
                    }

                })
            }

        }

        onMounted(() => {
            events.bind()
        })

        return {
            ...toRefs(data),
            ...events
        }

    },
})
</script>

<style scoped>
/* 背景 */
.tab {
    /* background-color: rgb(239, 240, 242); */
    padding: 1vh;
    border-radius: 5px;
    margin-top:-1vh ;
}

/* 按钮样式 */
.grid-content {
    margin: auto;
    margin-top: 2vh;
    border-radius: 5px;
    background-color: rgb(251, 251, 251);
    width: 99%;
    line-height: 45px;
    text-align: left;
    padding: 10px;
    border: 1px solid darkgray;
    box-shadow: 0px 0px 2px grey;
}

.flex {
    float: right;
    /* margin-right: 2vh; */
}

.trr {
    margin: auto;
    margin-top: 2vh;
    border-radius: 5px;
    padding: 10px;
    /* height: 75vh; */
    width: 99%;
    background-color: rgb(251, 251, 251);
    box-shadow: 0px 0px 2px grey;
}
</style>
